<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>jianli</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css">
    <link rel="stylesheet" href="a.css">
    <link rel="stylesheet" href="./loadding.css">
    <script src="https://at.alicdn.com/t/font_798093_2xqozpyeld3.js">
    </script>
</head>

<body>

    <div id="topNavBar" class="top-Nav-Bar ">
        <div class="top-Nav-Bar-inner clearfix">
            <a class="logo" href="#" alt="logo" style="float: left;">
                <span class="rs">RS</span><span class="card">card</span>
            </a>
            <nav class="menu" style="float: right;">
                <ul class="clearfix">
                    <li>
                        <a href="#About">关于</a>
                    </li>
                    <li>
                        <a href="#Skills">技能</a>

                    <li class="menuTigger">
                        <a href="#Production">作品</a>
                        <ul class="submenu">
                            <li>作品1</li>
                            <li>作品2</li>
                            <li>作品3</li>
                        </ul>
                    </li>
                    <li class="menuTigger">
                        <a href="#Blog">博客</a>
                        <ul class="submenu">
                            <li>博客1</li>
                            <li>博客2</li>
                            <li>博客3</li>
                        </ul>
                    </li>
                    <li>
                        <a href="#Calendar">日历</a>
                    </li>
                    <li>
                        <a href="#Contact">联系方式</a>
                    </li>
                    <li>
                        <a href="#Others">其它</a>
                    </li>
                </ul>
            </nav>
        </div>
    </div>
    <div class="banner">
        <div class="mask"></div>
    </div>
    <main>
        <div data-x id="About" class="userCard">
            <div class="pAt clearfix">
                <div class="picture">
                    <img src="./touxiang.jpg" alt="头像">
                </div>
                <div class="text">
                    <div class="profile">
                        <span class="welcome">Hello
                            <span class="triangle"></span>
                        </span>
                        <h1>江大河</h1>
                        <p>前端开发工程师</p>
                        <hr>
                        <dl>
                            <dt>年龄</dt>
                            <dd>18</dd>
                            <dt>所在城市</dt>
                            <dd>北京</dd>
                            <dt>邮箱</dt>
                            <dd>jiagdaheda2@gmail.com</dd>
                            <dt>手机</dt>
                            <dd>18142007566</dd>
                        </dl>
                    </div>
                </div>
            </div>
            <footer class="media">
                <a href="#"><svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jianshu"></use>
                    </svg>
                </a>
                <a href="#"><svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-github"></use>
                    </svg>
                </a>
                <a href="#"><svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-twiter"></use>
                    </svg>
                </a>
                <a href="#"><svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jirengulogogreen"></use>
                    </svg>
                </a>
                <a href="#"><svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-facebook"></use>
                    </svg>
                </a>
                <a href="#"><svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-tumblr"></use>
                    </svg>
                </a>
                <a href="#"><svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-weibo"></use>
                    </svg>
                </a>
            </footer>

        </div>
        <p class="downloadresum-wrap">
            <a class="downloadresum" href="./jianli.pdf" target="_blank" download>下载 PDF 简历</a>
        </p>
        <p class="self-introduction">
            TCP 对应用进程一次把多长的报文发送到TCP 的缓存中是不关心的 TCP 根据对方给出的窗口值<br>
            和当前网络拥塞的程度来决定一个报文段应包含多少个字节<br>
            (UDP 发送的报文长度是应用进程给出的)
        </p>
    </main>
    <section data-x id="Skills" class="skills">
        <h2>技能</h2>
        <ol class="clearfix">
            <li>
                <h3>HTML 5&amp;css 3</h3>
                <div class="progressBar">
                    <div class="progress" style="width: 75%">
                    </div>
                </div>
            </li>
            <li>
                <h3>Javascript</h3>
                <div class="progressBar">
                    <div class="progress" style="width: 40%">
                    </div>
                </div>
            </li>
            <li>
                <h3>jQuery</h3>
                <div class="progressBar">
                    <div class="progress" style="width: 61%">
                    </div>
                </div>
            </li>
            <li>
                <h3>vue.js</h3>
                <div class="progressBar">
                    <div class="progress" style="width: 42%">
                    </div>
                </div>
            </li>
            <li>
                <h3>react.js</h3>
                <div class="progressBar">
                    <div class="progress" style="width: 38%">
                    </div>
                </div>
            </li>
            <li>
                <h3>node.js</h3>
                <div class="progressBar">
                    <div class="progress" style="width: 22%">
                    </div>
                </div>
            </li>
        </ol>
    </section>
    <section data-x id="Production" class="portfolio">
        <h2>作品集</h2>
        <div class="works" >
            <!-- Slider main container -->
            <div class="swiper-container">
                <!-- Additional required wrapper -->
                <div class="swiper-wrapper">
                    <!-- Slides -->
                    <img src="./剪切画/nav.png" class="swiper-slide">
                    <img src="./剪切画/canvas.png" class="swiper-slide">
                    <img src="./剪切画/Apple-like_Slides.png" class="swiper-slide">
                </div>
                <!-- If we need pagination -->
                <div class="swiper-pagination"></div>

                <!-- If we need navigation buttons -->

                <!-- If we need scrollbar -->
                <div class="swiper-scrollbar"></div>
            </div>
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
        </div>
    </section>
    <section data-x class="message" >
        <h2>留言</h2>
        <ol id="messageList">            
        </ol>
        <form id="postMessage"  style="width: 500px ;margin: 50px auto; " >
            <label>用户名</label>
            <input type="text" name="name">
            <label >信息</label>
            <input type="text" name="content">
            <input type="submit" value="提交">
        </form>
    </section>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tween.js/17.2.0/Tween.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js"></script>
    <script src="//cdn.jsdelivr.net/npm/leancloud-storage@4.5.0/dist/av-min.js"></script>
    <script src="./js/base/View.js"></script>
    <script src="./js/base/Model.js"></script>
    <script src="./js/base/Controller.js"></script>
    <script src="./js/init-swiper.js"></script> <!-- 初始化引入的swiper -->
    <script src="./js/auto-slide-up.js"></script><!-- 页面上滑效果 -->
    <script src="./js/stick.js"></script><!-- 导航条动画效果 -->
    <script src="./js/smoothy-navigation.js"></script><!-- 导航条菜单栏点击后页面滑动动画效果 -->
    <script src="./js/message.js"></script>
    
    <script>
        /*setTimeout(
           function(){
             siteWelcome.classList.remove('active') },1000)*/

    </script>


</body>

</html>